import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";
import AppTitle from "../../../../../components/AppTitle"
import { onOption1, onOption2, onOption3 } from "./data";
// import AppEmpty from "../../../../../components/AppEmpty";

import "./index.less";

const App = (props) => {

  const value = props.value || "1";

  const title = value === "1" ? "零星维修项目占比 近7天": 
                value === "2" ? "发帖情况分析 近15天": 
                value === "3" ? "各物业任务完成情况 近7天": ""

  const chartRef = useRef(null);

  useEffect(() => {
    const myChart = info();
    return () => {
      myChart && myChart.dispose()
    }
  // eslint-disable-next-line
  }, [props.value])

  const info = () => {
    const myChart = echarts.init(chartRef.current);
    if(value === "1") {

      const options = onOption1();
      myChart.setOption(options, true);

    } else if(value === "2") {

      const options = onOption2();
      myChart.setOption(options, true);

    } else if(value === "3") {

      const options = onOption3();
      myChart.setOption(options, true);

    }
    return myChart;
  }

  return (
    <div className="left-up">
      <AppTitle title={title} /> 
      {/* <AppEmpty height={200} /> */}
      <div style={{ height: 205 }} ref={chartRef} />
    </div>
  );
}

export default App;


